<template>
  <div style="display: flex;">
    <el-form-item  label="访客记录搜索：">
      <div style="display: flex;">
        <el-input v-model="findparams.keyword" 
        placeholder="输入手机号/姓名/来访类型进行查询"
        style="width: 300px;"></el-input>
        <el-button type="primary" plain @click="getTableData" style="margin-left: 10px;">搜索</el-button>
        <el-button @click="changeOrder" style="margin-left: 10px; width: 130px;">
          <p v-if="!findparams.order">按时间排序</p>
          <p v-else>恢复默认排序排序</p>
        </el-button>
      </div>
    </el-form-item>
  </div>
  <el-table :data="tableData.records" style="width: 100% ;height: 77vh;">
    <el-table-column prop="name" label="姓名" width="auto"/>
    <el-table-column prop="sex" label="性别" width="auto">
      <template #default="scoped">
        <p v-if="scoped.row.sex">男</p>
        <p v-else>女</p>
      </template>
    </el-table-column>
    <el-table-column prop="phone" label="联系方式" width="auto" />
    <el-table-column prop="type" label="申请类型" width="auto" />
    <el-table-column prop="time" label="申请时间" width="auto" />
    <el-table-column prop="state" label="审核状态" width="auto">
      <template #default="scoped">
        <p v-if="scoped.row.state" style="color: green;">已通过</p>
        <p v-else  style="color: red;">未通过</p>
      </template>
    </el-table-column>
    <el-table-column  label="操作" width="auto">
      <template #default="scoped">
        <el-button v-if="!scoped.row.state" @click="changeState(scoped.row.id,scoped.row.state,'alw')" plain type="primary">通过</el-button>
        <el-button v-if="scoped.row.state" @click="changeState(scoped.row.id,scoped.row.deleted,'del')" plain type="danger">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
    <el-pagination 
    style="margin-top: 10px;" 
    background
    :page-count="tableData.pages"
    v-model:current-page="params.pageNo"
    @current-change="getTableData"
    :total="tableData.total">
  </el-pagination>
</template>

<script  setup>
import { _axios,request,get,post } from '@/plugins/axios' 
import { ref,reactive } from 'vue'
import path from './path'
let tableData = ref({})
// 分页的数据，作为分页查询get的参数
const params = reactive({
  pageNo : 1,
  pageSize: 12
})
const findparams = reactive({
  keyword:null,
  order: false
})
// 页面渲染的时候先获取一次，初始化
getTableData()
// 获取数据
function getTableData(){
  if(findparams.keyword != null){
    params.keyword = findparams.keyword
  }
  if(findparams.order){
    params.order = true
  } else params.order = false
  get(path.list,params,content => {
    tableData.value = content
  })
}
function changeOrder(){
  findparams.order = !findparams.order
  getTableData()
}
function changeState(id,state,key){
  let text = key == 'alw' ? '您确定要放行么，一但通过将无法修改！' : '您确定要删除么，一但删除将无法恢复！';
  ElMessageBox.confirm(text,'警告',{
    type:'warning',
    confirmButtonText: '确认',
    cancelButtonText: '取消',
  }).then(()=>{
      post(path.changeState,{id,state,key},content =>{
        getTableData()
      })
  }).catch(()=>{})
}
</script>

<style scoped lang='scss'>

</style>